<template>
	<view class="b-detail-box">
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :selectedBackgroundColor="'#666666'">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item,index) in info" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="desc">
			{{detail.describ}}
		</view>
		<view class="bnt" @tap="goUrl()" v-if="info.length">
			下单同款
		</view>
	</view>
</template>

<script>
	import {getShowDetail} from "@/api/buyer.js"
	export default {
		data() {
			return {
				info: [],
				current: 0,
				mode: 'default',
				detail: {},
				def: {}
			}
		},
		onLoad(ops) {
			this.def = ops
			this.getDetail()
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			getDetail(){
				getShowDetail({id:this.def.id}).then((res) => {
					this.detail = res
					let firstPagePic = res.firstPagePic ? res.firstPagePic.split(',') : []
					let showImg = res.showImg ? res.showImg.split(',') : []
					this.info = [...firstPagePic,...showImg]
				})
			},
			goUrl(url){
				uni.removeStorage({
					key: 'diyUrlList'
				})
				uni.removeStorage({
					key: 'orderElementPicLen'
				})
				uni.navigateTo({
					url: '/pagesC/buyer/rendering?id=' + this.def.id + '&subjectId='+ this.detail.subjectId + '&showId='+ this.detail.id  + '&orderOrigin=' + this.def.orderOrigin
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.b-detail-box{
	margin: 0 32rpx;
	padding-top: 30rpx;
	padding-bottom: 152rpx;
	image{
		border-radius: 40rpx;
		width: 686rpx;
		height: 918rpx;
	}
	.desc{
		font-size: 36rpx;
		color: #333;
		margin-top: 32rpx;
	}
	.bnt{
		width: 90%;
		position: fixed;
		left: 50%;
		bottom: 52rpx;
		margin-left: -45%;
		border-radius: 50rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #E4919D;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		margin-top: 114rpx;
	}
}
.swiper-box{
	height: 918rpx;
}
/deep/.uni-swiper__dots-box{
	bottom: 30rpx !important;
}
</style>
